<template>
	<view class="col">
		<view class="bg col">
			<image src="/static/images/login_logo.png" class="logo"></image>
			<view class="title">对吧交易</view>
			<view class="desc">欢迎使用「对吧交易」</view>
		</view>
		<view class="info col">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item  prop="account" labelWidth="0">
					<input class="input" placeholder="请输入手机号或账号" placeholder-class="place" v-model="userInfo.account"/>
				</u-form-item>
				<u-form-item  prop="password" labelWidth="0">
					<input class="input" placeholder="请输入密码" placeholder-class="place" style="margin-top: 40rpx;" v-model="userInfo.password" />
				</u-form-item>
				
			</u--form>
			<view class="btn row-center" @click="goLogin">登录</view>
			<view class="row-between-center" style="margin-top: 40rpx;">
				<view class="reg" @click="goReg">
					注册账号
				</view>
				<view class="forget">
					忘记密码？
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					'account': {
						type: 'string',
						required: true,
						message: '请输入手机号或账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
				userInfo: {
					account: '',
					password: '',
				},
			}
		},
		methods: {
			goReg(){
				uni.navigateTo({
					url:'/src/pages/other/registe'
				})
			},
			goLogin(){
					this.$refs.uForm.validate().then(res => {
								// uni.$u.toast('校验通过')
							}).catch(errors => {
								// uni.$u.toast('校验失败')
							})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 600rpx;
		flex-shrink: 0;
		background-image: url('/static/images/login_bg.png');
		background-size: 100% 600rpx;
		background-repeat: no-repeat;
		padding-left: 80rpx;
	}

	.logo {
		margin-top: 216rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.title {
		margin-top: 40rpx;
		color: #17161B;
		font-size: 48rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 64rpx;
		/* 133.333% */
	}

	.desc {
		color: #17161B;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 48rpx;
		/* 150% */
	}

	.info {
		z-index: 99;
		padding: 80rpx;
		margin-top: -20rpx;
		border-radius: 24rpx 24rpx 0 0;
		background: #FFF;
		box-shadow: 0px -8rpx 8rpx 0px rgba(0, 0, 0, 0.04);
	}

	.input {
		padding: 0 48rpx;
		width: 100%;
		border-radius: 16rpx;
		background: #f2f5fa;
		height: 96rpx;
	}

	.place {
		color: #C9CCD5;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 48rpx;
		/* 150% */
	}

	.btn {
		margin-top: 40rpx;
		border-radius: 16rpx;
		background: #3B60D3;
		height: 92rpx;
		color: #FFF;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 48rpx;
		/* 150% */
	}
	.reg{
		color:  #17161B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 48rpx; /* 171.429% */
	}
	.forget{
		color: #979797;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	
</style>